<script setup lang="ts">
import { ref, watch } from "vue";
import { onLoad, onPageScroll, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useInfiniteScroll } from "@/composables/useInfiniteScroll";
import { getCheeseList, type IntegralInfo } from "@/api/user";

const { items: list, isLoading, hasMore, error, resetAndLoad, loadMore } = useInfiniteScroll<IntegralInfo>(getCheeseList);

const tabs = ["全部", "获取", "消耗"];
/** 查询参数  */
const queryParams = ref({
  type: 0,
});

watch(queryParams, (newQueryParams) => {
  console.log("Query Params changed:", newQueryParams);
  // resetAndLoad(newQueryParams);
}, { deep: true });

// 页面加载
onLoad(() => {
  // resetAndLoad(queryParams.value);
});

// 监听用户下拉动作
onPullDownRefresh(() => {
  resetAndLoad(queryParams.value).finally(() => {
    // 停止当前页面下拉刷新
    uni.stopPullDownRefresh();
  });
});

// 页面滚动到底部的事件
onReachBottom(() => loadMore());

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
<view class="relative overflow-hidden">
  <page-navbar title="我的奶酪" :hideTitle="true" :isScrolled="isScrolled"></page-navbar>

  <page-title title="我的奶酪"></page-title>

  <view class="my-1 overflow-x-auto scrollbar-hide">
    <view class="w-fit flex gap-2 p-4">
      <view
        class="rounded-full px-3 py-1 box-border break-keep text-sm"
        :class="[queryParams.type == index ? 'text-white font-500 bg-gradient-to-r from-#5199F9 to-#0164E6' : 'text-black/80 bg-white border-(~ solid black/8)']"
        v-for="(item, index) in tabs"
        :key="index"
        @click="queryParams.type = index"
      >
        {{ item }}
      </view>
    </view>
  </view>

  <page-list :list="list" :hasMore="false" :isLoading="isLoading" :loadMore="loadMore">
    <view
      class="intrinsic-h-17 mx-4 mb-3 p-3 rounded-lg border-(~ solid white) grid grid-flow-col grid-cols-[1fr_auto] items-center gap-2 bg-([url(https://static.minglvtang.com/images/bg_cheese_list.png)] no-repeat right contain #EFF6FF)"
      v-for="item in list" :key="item.id"
    >
      <view class="text-(sm #333333)">{{ item.remark }}</view>
      <view class="text-(xs #999999)">{{ item.created_at }}</view>
      <view
        class="row-span-2 text-(lg transparent) font-700 bg-(clip-text gradient-to-r)"
        :class="[item.type==1 ? 'from-[#5199F9] to-[#0164E6]': 'from-[#FF78B2] to-[#E85B98]']"
      >
        {{ item.type == 1 ? "+" : "-" }}{{ item.integral }}
      </view>
    </view>
  </page-list>
</view>  
</template>
